%include header_template
	<script>
		var xmlhttp;
		// Are we using a modern browser or ...
		if (window.XMLHttpRequest) {
		  // code for IE7+, Firefox, Chrome, Opera, Safari
		  xmlhttp=new XMLHttpRequest();
		} else {
		  // code for IE6, IE5
		  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
		}

		function getJSON(){	
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
			    // var jsonobj = eval ("(" + xmlhttp.responseText + ")"); 
			    var jsondoc = JSON.parse(xmlhttp.responseText);
				displayData(jsondoc);
			}
		}

		function createTableRowContent(rowObject, data, cellType){
			var rowContent = document.createElement(cellType);
			var cell = document.createTextNode(data);
			rowContent.appendChild(cell);
			rowObject.appendChild(rowContent);
		}

		function createTableData(rowObject, data){
			createTableRowContent(rowObject, data, 'td');
		}

		function createTableHeader(rowObject, data){
			createTableRowContent(rowObject, data, 'th');
		}

		function displayData(jsonString){

			var table = document.createElement('table');
			table.border = "1";

			var thead = document.createElement('thead');
			table.appendChild(thead);

			var row = document.createElement('tr');

			createTableHeader(row, 'Community URL');
			createTableHeader(row, 'ID');
			createTableHeader(row, 'Name');
			createTableHeader(row, 'Type');
			createTableHeader(row, 'Desc');
			createTableHeader(row, 'Status');
			createTableHeader(row, 'Timestamp');

			thead.appendChild(row);

			var tbody = document.createElement('tbody');
			table.appendChild(tbody);

			for(i=0; i<jsonString.services.length; i++){
				var row = document.createElement('tr');

				createTableData(row, jsonString.services[i].community_url);
				createTableData(row, jsonString.services[i].id);
				createTableData(row, jsonString.services[i].name);
				createTableData(row, jsonString.services[i].type);
				createTableData(row, jsonString.services[i].description);
				createTableData(row, jsonString.services[i].status);
				createTableData(row, jsonString.services[i].timestamp);

				tbody.appendChild(row);
			}

			document.getElementById('mytable').innerHTML = '';
			document.getElementById('mytable').appendChild(table);
		}

		xmlhttp.onload = getJSON;

		xmlhttp.open("GET", "/services/searchservices/{{keywords}}", true);
		xmlhttp.send();
	</script>
	<head>
		<title>Services Search Results</title>
		%for item in css:
		<link rel="stylesheet" type="text/css" href="{{item}}" />
		%end
		%for item in js:
		<script  src="{{item}}" language="javascript"></script>
		%end
		<script>
  			$(document).ready(function(){
    			$("#searchServices").validate();
 			 });
 		</script>
	</head>
	<body>
		<br />
		<form class="cmxform" id="searchServices" method="post" action="search_results">
			<fieldset>
   				<legend>Get Services By Keyword</legend>
   				<p>
     				<label for="cid">Service Search String</label>
     				<em>*</em><input id="ckeyword" name="keywords" size="35" class="required" />
   				</p>
   				<p>
     				<input class="submit" type="submit" value="Search"/>
   				</p>
   			</fieldset>
		</form>
		<br />
		<p><b>Search Results:</b><div id="mytable"></div></p>
%include footer_template








